<template>
    <div class="bannerList">
        <el-table border :data="list" style="width: 100%" >
            <el-table-column prop="bannerid" label="编号" width="200">
            </el-table-column>
            <el-table-column  label="图片" width="200px" >
                <!-- slotScope 作用域插槽 -> 组件内向组件传递的数据  => {row:当前行的数据} -->
                <template #default="slotScope">
                    <img class="img" :src="slotScope.row.img" alt="">
                </template>
            </el-table-column>
            <el-table-column  prop="alt" label="图片提示" width="200px" >
            </el-table-column>
            <el-table-column  prop="link" label="图片链接" width="200px" >
            </el-table-column>

            <el-table-column prop="flag" label="公开" align="center">
                <template #default="slotScope">
                    <el-switch
                    v-model="slotScope.row.flag"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStateHandler(slotScope.row.bannerid,$event)"
                    >
                    </el-switch>
                </template>

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template  #default="slotScope">
                    <el-button @click="deleteBannerById(slotScope.row.bannerid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getBannerListAPI,updateBannerFlagAPI,deleteBannerAPI } from "@/api/banner";
export default {
    name: "BannerListView",
    data() {
        return {
            list: null,
        }
    },
    methods: {
        async getBannerList() {
            try {
                var res = await getBannerListAPI();
                console.log("请求成功", res);
                this.list = res.data;
            } catch (err) {
                console.log("失败", err);
            }
        },
        async changeStateHandler(bannerid,flag){
            console.log(bannerid,flag);
            try {
                var res = await updateBannerFlagAPI({
                    bannerid,
                    flag
                });
                console.log("请求成功", res);
                this.$message.success("状态更新成功");
            } catch (err) {
                console.log("失败", err);
                this.$message.err(err.message);
            }

        },
        async deleteBannerById(bannerid){
            console.log(bannerid);

            try {
             
                var res = await deleteBannerAPI({
                    bannerid,
                });
                console.log("请求成功", res);
                this.$message.success("状态更新成功");

                var index = this.list.findIndex(v=>v.bannerid == bannerid);
                console.log(index);
                this.list.splice(index,1);
            } catch (err) {
                console.log("失败", err);
                this.$message.err(err.message);
            }


        }
    },
    mounted() {
        this.getBannerList();
    }
}
</script>

<style lang="scss" scoped>
    .bannerList .img{
        width: 100%;
    }
</style>